@import '~components/constants.scss';

.popupComponent {
  height: 100%;
  width: 100%;
  background: white;
  position: relative;
  .header {
    .close {
      background: #f2f2f2;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      line-height: 40px;
      padding: 8px;
      box-sizing: border-box;
      position: absolute;
      right: 10vh;
      top: 10vh;
      cursor: pointer;
      z-index: 10;
      line-height: normal;

      &:hover {
        background: #eee;
        & > * {
          opacity: 0.8;
        }
      }
      & > * {
        opacity: 0.5;
      }
    }
  }
  .componentContainer {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    .component {
      width: 100vw;
      transform: translateX(-50%) translateY(-50%);
    }
  }
}
